<template>
  <div class="consumption-page page-container">
    <div class="content">
      <a-table 
        rowKey="id"
        :columns="columns"
        :data-source="dataSource"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'amount'">
            <span class="amount">¥{{ record.amount.toFixed(2) }}</span>
          </template>
          <template v-else-if="column.dataIndex === 'product'">
            <a-tag color="blue">{{ record.product }}</a-tag>
          </template>
          <template v-else-if="column.dataIndex === 'time'">
            {{ record.time }}
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
import { Table, Tag, Icon } from 'ant-design-vue'
import { queryConsumption } from '@/api/user'

export default {
  name: 'ConsumptionList',
  components: {
    ATable: Table,
    ATag: Tag,
    AIcon: Icon
  },
  data() {
    return {
      loading: false,
      dataSource: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        showSizeChanger: true
      },
      columns: [
        {
          title: '消费金额',
          dataIndex: 'amount',
          key: 'amount',
          width: 100,
          align: 'center'
        },
        {
          title: '消费时间',
          dataIndex: 'createTime',
          key: 'createTime',
          width: 180
        },
        {
          title: '描述',
          dataIndex: 'description',
          key: 'description',
          ellipsis: true
        }
      ]
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    handleTableChange(pagination) {
      this.pagination = { ...this.pagination, ...pagination }
      this.fetchData()
    },
    async fetchData() {
      this.loading = true
      try {
        const { current, pageSize } = this.pagination
        const response = await queryConsumption({
          userId: this.$store.getters['user/id'],
          pageNo: current,
          pageSize: pageSize
        })

        if (response.code === 200) {
          this.dataSource = response.data.data || []
          this.pagination.total = response.data.total || 0
        } else {
          this.$message.error(response.message || '获取消费记录失败')
        }
      } catch (error) {
        console.error('获取消费记录失败:', error)
        this.$message.error('获取消费记录失败')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.consumption-page {
  .header {
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 16px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    
    .header-left {
      display: flex;
      align-items: center;
      color: #1890ff;
      cursor: pointer;
      
      .anticon {
        margin-right: 4px;
      }
    }
    
    .title {
      flex: 1;
      text-align: center;
      font-size: 16px;
      font-weight: 500;
    }
  }
  
  .content {
    padding: 16px;
    
    :deep(.ant-table) {
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      
      .amount {
        color: #f5222d;
        font-weight: 500;
      }
    }
  }

  @media screen and (max-width: 768px) {
    .content {
      padding: 8px;
      
      :deep(.ant-table) {
        font-size: 12px;
        
        .ant-table-thead > tr > th,
        .ant-table-tbody > tr > td {
          padding: 8px !important;
        }
        
        .ant-tag {
          font-size: 12px;
          padding: 0 6px;
        }
      }
    }
  }
}
</style> 